import React, { useEffect, useState } from 'react'
import ProLayout, { PageContainer } from '@ant-design/pro-layout'
import ProSkeleton from '@ant-design/pro-skeleton'
import { getWebConfigList } from '@/services/webconfig'

// 引入子组件
import Setting from './Components/Settings'
import Oss from './Components/Oss'
import Sms from './Components/Sms'
import AuthLogin from './Components/AuthorizationLogin'
import UserAgreement from './Components/UserAgreement'
import TechnicalHelp from './Components/TechnicalHelp'
import ToeflIbt from './Components/ToeflIbt'
import EmigratedRoles from './Components/EmigratedRoles'
import GetTime from '@/components/GetTime'

const Index = () => {
  // 设置网站配置默认显示
  const [pathname, setPathname] = useState('site_setting')
  const [pathname2, setPathname2] = useState('site_setting')
  // 定义获取网站配置列表 如果返回undefined 则不渲染页面
  const [webConfigList, setWebConfigList] = useState(undefined)
  // 获取网站配置列表id
  const [settingData, setSettingData] = useState(1)

  useEffect(async () => {
    /**
     * 获取网站配置列表
     * @type {any}
     */
    const configer = await getWebConfigList()
    // 遍历网站配置列表
    let routes = configer.data.map((item) => {
      return {
        id: item.id,
        path: item.type,
        name: item.cn_name,
        component: item.type
      }
    })
    setWebConfigList({ routes })
  }, [])
  //定义数组取组件
  const settingArr = {
    site_setting: <Setting/>,
    oss: <Oss/>,
    sms: <Sms/>,
    authorization_login: <AuthLogin/>,
    user_agreement: <UserAgreement/>,
    technical_help: <TechnicalHelp/>,
    toefl_ibt: <ToeflIbt/>,
    emigrated_roles: <EmigratedRoles/>
  }

  return (
    <PageContainer header={{
      extra: [
        <GetTime key="getTime"/>
      ]
    }}
    >
      {
        webConfigList === undefined ?
          <div
            style={{
              background: '#fafafa',
              padding: 24,
            }}
          >
            <ProSkeleton type="list"/>
          </div>
          :
          <ProLayout
            title={false}
            logo={false}
            route={webConfigList}
            location={{
              pathname: pathname2
            }}
            navTheme="light"
            headerRender={false}
            collapsedButtonRender={false}
            collapsed={false}
            menuItemRender={(item, dom) => (
              <a onClick={() => {
                setSettingData(item.id)
                setPathname(item.component)
                setPathname2(item.path || 'site_setting')
              }}>
                {dom}
              </a>

            )}
          >
            <PageContainer
              style={{
                height: '100%',
                background: '#fff',
                marginLeft: '5px',
              }}>
              <div style={{ height: '150vh', }}>
                {
                  settingArr[pathname]
                }
              </div>
            </PageContainer>
          </ProLayout>
      }
    </PageContainer>
  )
}

export default Index

